<!--
 * @Author: your name
 * @Date: 2020-12-28 10:43:58
 * @LastEditTime: 2020-12-28 10:51:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basiccss\box\padding.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距</title>
    <style>
        a{
            padding: 10px 30px;
            border: solid 1px #dddddd;
            border-radius: 5px;
        }

        /*
        内边距设置内边的距离，会将现在的元素撑大
        box-sizing:border-box  设置此属性之后 设置的所有的内边距都只是对内有效 
        固定盒子大小
        */
        h2{
            border: 10px solid #dddddd;
            height: 60px;
            width: 200px;
            padding: 50px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <a href="#">MYSQL</a>
    <a href="#">CSS</a>
    <hr>
    <h2>houdunren.com</h2>
</body>
</html>